<!DOCTYPE html>
<html style="height: 100%">
   <head>
      <meta charset="utf-8">
      <script type="text/javascript" src="echarts/echarts.min.js"></script>
<!--       <script type="text/javascript" src="js/mpda.js"></script>
      <script type="text/javascript" src="js/geo.js"></script> -->
       <script type="text/javascript" src="echarts/jquery.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
      <div id="main" style="height: 800px"></div>
      <br>
      <script type="text/javascript">
        $.get('echarts/qingdao.json', function (qDjson) {
            echarts.registerMap('qingdao', qDjson);
            var chart = echarts.init(document.getElementById('main'));
            //因为数据比较多，这里只是举例参考
             var data = [
                {"name":"青岛威达体育用品有限公司","value":"1000.00"},
                {"name":"青岛万福食品有限公司","value":"1804.76"},
                {"name":"青岛帅潮实业有限公司","value":"3000.00"},
                {"name":"青岛市琴岛电器有限公司","value":"1200.00"},
                {"name":"青岛普天电器有限公司","value":"6000.00"},
                {"name":"青岛龙兴机械有限公司","value":"200.00"},
                {"name":"青岛理研电线电缆有限公司","value":"1000.00"},
                {"name":"青岛胶南瑞源纸业有限公司","value":"500.00"},
                {"name":"青岛胶南惠丰机械有限公司","value":"100.00"},
                {"name":"青岛佳春机械有限公司","value":"500.00"}
            ];
            var geoCoordMap =  {
                '青岛威达体育用品有限公司':[120.442145,36.353304],
                '青岛万福食品有限公司':[120.501856,36.862275],
                '青岛帅潮实业有限公司':[120.402697,36.218331],
                '青岛市琴岛电器有限公司':[120.500757,36.417052],
                '青岛普天电器有限公司':[120.083109,36.295657],
                '青岛龙兴机械有限公司':[119.778027,36.997143],
                '青岛理研电线电缆有限公司':[120.510292,36.309673],
                '青岛胶南瑞源纸业有限公司':[120.02328,35.890329],
                '青岛胶南惠丰机械有限公司':[119.918591,35.918377],
                '青岛佳春机械有限公司':[120.010518,36.063161]
            }

            //获取数据和坐标
            var convertData= function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                  
                    var geoCoord = geoCoordMap[data[i].name];
                   
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                        
                    }
                }
                return res;
            };

            var option = {
                backgroundColor: '#404a59',
                title: {
                    text: '青岛市企业分布',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                //提示框
                tooltip : {
                    trigger: 'item',
                    formatter: function (params) { //添加数字,否则为坐标
                                                   //console.log(params.value)
                        return params.name+'<br>'+'注册资本'+''+':'+''+params.value[2]+''+'万元'
                        
                    },
                    padding:[
                        5,  // 上
                        10, // 右
                        5,  // 下
                        10, // 左
                    ],
                    textStyle:{
                      color: '#fff',
                      fontSize:'13'
                    }
                },
               //图例组件
                legend: {
                    orient: 'horizontal',
                    //相等于left 、top、bottom、right
                    y: 'bottom',
                    x:'right',
                    //这里的数据名称要和series中的name名称一样，否则不显示
                    data:['规上企业'],
                    textStyle: {
                        color: '#fff'
                    }
                },

                //地图
                geo: {
                    map: 'qingdao',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        //正常状态下
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        //选定某一区域下 相当于 hover
                        emphasis: {
                            areaColor: '#2a333d'
                            
                        }

                    },
                   z:1 
                },
                //这里数据中主要是冒泡图数据
                series : [{
                        name: '规上企业',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        //标点的大小
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 30000;  //也可以根据这里的数值更改大小  val[2] / x  x越小，标点越大
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false  //根据需求可以更改标点标签是否显示
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ddb926'
                            }
                        }
                    },
                    {
                        name:'上规企业',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {   //这里是多个数据比较大小
                            return b.value - a.value;
                        }).slice(0,1000)),  //slice里面的数可以是0 ，意思是全部显示  0,1000 意思是显示这组数据中最大前1000组
                        symbolSize: function (val) {
                            return val[2] / 30000;
                        },

                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#f4e925',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        }
                       
                    }

                ]
            };

            chart.setOption(option);
        });

        
    </script>
    </body>
</html>